<template>
  <div class="footerContainer">
    <div class="footerMain">
      <div class="mainLeft">
        <div class="mainLeftItem">
          <a href="#" class="mainLeftItemHref addmargin">服务条款</a>
          <span>|</span>
          <a href="#" class="mainLeftItemHref">隐私政策</a>
          <span>|</span>
          <a href="#" class="mainLeftItemHref">儿童隐私政策</a>
          <span>|</span>
          <a href="#" class="mainLeftItemHref">版权投诉指引</a>
          <span>|</span>
          <a href="#" class="mainLeftItemHref">意见反馈</a>
          <span>|</span>
          <a href="#" class="mainLeftItemHref">广告合作</a>
        </div>
        <div class="mainLeftItem">
          <p>
            <span>网易公司版权所有©1997-2020</span>
            <span>杭州乐读科技有限公司运营：浙网文[2018]3506-263号</span>
          </p>
          <p>
            <span> 违法和不良信息举报电话：0571-89853516 </span>
            <span>举报邮箱：ncm5990@163.com</span>
          </p>
          <p>
            <span>粤B2-20090191-18</span>
            <span> 工业和信息化部备案管理系统网站 </span>
            <span
              ><img src="../assets/images/police.png" alt="" />浙公网安备
              33010902002564号</span
            >
          </p>
        </div>
      </div>
      <ul class="mainRigth">
        <li>
          <div class="footer-incon incon1"></div>
          <span class="footer-enter enter1"></span>
        </li>
        <li>
          <div class="footer-incon incon2"></div>
          <span class="footer-enter enter2"></span>
        </li>
        <li>
          <div class="footer-incon incon3"></div>
          <span class="footer-enter enter3"></span>
        </li>
        <li>
          <div class="footer-incon incon4"></div>
          <span class="footer-enter enter4"></span>
        </li>
        <li>
          <div class="footer-incon incon5"></div>
          <span class="footer-enter enter5"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style lang="less" scoped>
.footerContainer {
  padding-bottom: 50px;
  background: #f2f2f2;
  border-top: 1px solid #d3d3d3;
  .footerMain {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 1000px;
  }
}
// 左侧
.mainLeft {
  margin-top: 10px;
  .mainLeftItemHref {
    text-decoration: none;
    color: #999999;
    &:hover {
      text-decoration: underline;
    }
  }
  .addmargin {
    margin-left: 7px;
  }
  span {
    margin: 10px;
  }
  .nomargin {
    margin-right: none;
  }
}
.mainLeftItem {
  p {
    color: #666;
    padding-top: 10px;
    span {
      margin: 5px;
    }
  }
}

// 右侧
.mainRigth {
  display: flex;
  justify-content: space-between;
  width: 420px;
  margin-top: 33px;
  div {
    width: 52px;
    height: 45px;
    // background-color: burlywood;
  }
  span {
    display: inline-block;
    margin-top:5px;
    width: 72px;
    height: 14px;
  }
  .incon1 {
    background-position: -63px -456.5px;
  }
  .incon2 {
    background-position: -63px -101px;
  }
  .incon3 {
    background-position: 0 0;
  }
  .incon4 {
    background-position: -60px -50px;
  }
  .incon5 {
    background-position: 0 -101px;
  }
  .enter1 {
    background-position: 0 -108px;
    margin-left: -6px;
  }
  .enter2 {
    background-position: -1px -91px;
  }
  .enter3 {
     background-position: 0 0;
  }
  .enter4 {
     background-position: 0 -54px;
  }
  .enter5 {
     background-position: -1px -72px;
  }
}
</style>
